"use client";

import React, {useState} from "react";
import {Button, Group, Menu, Pagination, Text} from "@mantine/core";
import {IconSelector} from "@tabler/icons-react";

interface IpdTablePaginationProps {
  totalRecords: number; // 总条数
  filteredRecords: number; // 当前已筛选条数（筛选条件）
  selectedRecords: number; // 当前已选择条数（点击复选框）
  rowsPerPage: number; // 每页行数
  totalPage: number; // 总页数
  currentPage: number; // 当前页码
}

export const IpdTablePagination = ({
  totalRecords,
  filteredRecords,
  selectedRecords,
  totalPage,
  rowsPerPage,
  currentPage,
}: IpdTablePaginationProps) => {
  const PAGE_SIZES = [5, 10, 15];
  const [currentrowsPerPage, setCurrentrowsPerPage] = useState(rowsPerPage);

  return (
    <Group justify="space-between">
      <Text size="sm">
        总数：{totalRecords} 已筛选：{filteredRecords} 当前选择：{selectedRecords}
      </Text>
      <Group gap="sm">
        <Text size="sm">每页显示条数：</Text>
        <Menu position="top" withArrow arrowPosition="center" trigger="click-hover">
          <Menu.Target>
            <Button variant="default" size="xs" rightSection={<IconSelector size={14} />}>
              {currentrowsPerPage}
            </Button>
          </Menu.Target>
          <Menu.Dropdown>
            {PAGE_SIZES.map((pageSize) => (
              <Menu.Item key={pageSize} onClick={() => setCurrentrowsPerPage(pageSize)}>
                {pageSize}
              </Menu.Item>
            ))}
          </Menu.Dropdown>
        </Menu>
        <Pagination total={totalPage} value={currentPage} size="sm" />
      </Group>
    </Group>
  );
};
